<template>
  <div id="cell-container" @click="chess">
    <span>{{ value }}</span>
  </div>
</template>

<script>
export default {
  name: 'Cell',
  data() {
    return {
      value: ''
    }
  },
  props: ['counter', 'i', 'j'],
  mounted() {
    // 自定义事件：重置数据
    this.$bus.$on('cellReset', () => this.reset())
  },
  beforeDestroy() {
    // 解绑自定义事件
    this.$bus.$off('cellReset')
  },
  methods: {
    /**
     * 下棋的方法
     */
    chess() {
      // 当前格子有值，则点击无效。
      if (this.value) {
        return
      }
      // 假设 X 先落子
      this.value = this.counter % 2 === 0 ? 'X' : 'O'
      // 触发自定义事件 record
      this.$bus.$emit('record', this.i, this.j, this.value)
      // 触发自定义事件：chessValid
      this.$bus.$emit('chessValid', this.i, this.j, this.value)
    },

    /**
     * 重置当前格子的数据
     */
    reset() {
      this.value = ''
    }
  }
}
</script>

<style lang="less">
#cell-container {
  padding: 20px;
  cursor: pointer;

  span {
    width: 20px;
    height: 20px;
    display: block;
  }
}
</style>